<!--
 * @Description: 希望KEEP REAL
 * @Version: 版本更新中...
 * @Autor: AKAYangYi
 * @Date: 2020-10-11 20:49:38
 * @LastEditors: YangYi
 * @LastEditTime: 2020-10-11 22:47:06
-->
<template>
  <div class="rankmain">
      <!-- 左侧排行榜分类 -->
     <div class="rank-left">
          <div class="left_icon" v-for="(item,index) in leftList" :key="index">
          {{ item.popRank.title }}
          <ul>
              <li v-for="(item,index) in item.popRank.items " :key="index">
                  <div class="rank-list" @click="goRankDetail(item.path,item.rankId)">
                      <div class="rank-list-left"><img :src="item.iconPath" alt=""></div>
                      <div class="rank-list-right"><p>{{item.itemTitle}}</p><p>{{item.tips}}</p></div>
                  </div>
              </li>
          </ul>
      </div>
     </div>
      <!-- 左侧排行榜分类 -->
       <div class="rank-right">
           <router-view></router-view>
       </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            leftList:[
                {
                    popRank:{
                        title:'云音乐特色榜',
                      
                        items:[
                            {
                                itemTitle:'云音乐飙升榜',
                                tips:'每天更新',
                                iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                                path:'rankDetail',
                                rankId:1001
                            },
                            {
                                itemTitle:'云音乐飙升榜',
                                tips:'每天更新',
                                iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                                path:'rankDetail',
                                rankId:1002
                            },
                            {
                                itemTitle:'云音乐飙升榜',
                                tips:'每天更新',
                                iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                                path:'rankDetail',
                                rankId:1003
                            },
                            {
                                itemTitle:'云音乐飙升榜',
                                 tips:'每天更新',
                                iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                                path:'rankDetail',
                                rankId:1004
                            },
                        ]
                    }
                },
                {
                    popRank:{
                        title:'云音乐特色榜',
                        iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                        items:[
                            {
                                itemTitle:'云音乐飙升榜',
                                tips:'每天更新',
                                  iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                            },
                            {
                                itemTitle:'云音乐飙升榜',
                                 tips:'每天更新',
                                  iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                            },
                            {
                                itemTitle:'云音乐飙升榜',
                                tips:'每天更新',
                                  iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                            },
                            {
                                itemTitle:'云音乐飙升榜',
                                 tips:'每天更新',
                                  iconPath:'http://p2.music.126.net/DrRIg6CrgDfVLEph9SNh7w==/18696095720518497.jpg?param=40y40',
                            },
                        ]
                    }
                },
            ]
        }
    },
    methods:{
        goRankDetail(path,id){
            // alert('路由跳转到详细的排行榜'+path);
            console.log(id)
        this.$router.push({name:'rankDetail',params:{rankId:id}});
        }
    },
    created(){
        this.$router.push({name:'rankDetail',params:{rankId:1001}});
    }
}
</script>

<style scoped>
.rankmain{
    width: 1000px;
    margin: 0 auto;
    border-left:1px solid gray ;
    border-right:1px solid gray ;
    overflow: hidden;
}
.rank-left{
    float: left;
    width: 200px;
     border-right:1px solid gray ;
     background: #ececec;
     box-sizing: border-box;
}
.rank-list{
    padding: 10px;
    overflow: hidden;
    cursor: pointer;
}
.rank-list-left{
    float: left;
    width: 40px;
    height: 40px;
}
.rank-list-right{
    float: left;
}
.rank-right{
    width: calc( 100% - 200px );
    float: right;
}
</style>